﻿@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/AjaxService.js")" type="text/javascript"></script>
<script id="WordTemplate" type="text/html">

        <span><#= data.Text #></span>
        <ul>
        <# for(var i =0; i < data.Definition.length; i++)
 { #>
    <li>
        <span><#= data.Definition[i] #></span
    </li>
  <# } #>
 </ul>
        >
    <
</script>
<script id="ScoresTemplate" type="text/html">
<ul>
 <# for(var i =0; i < data.length; i++)
 { #>
    <li>
        <span><#= data[i].UserName #></span>
        <span><#= data[i].Score #></span>
    </li>
  <# } #>
 </ul>
</script>

<script>
    $(document).ready(function () {
        FillData("@Url.Action("GetNewWord", "AjaxService", null)", "#WordInfo", "#WordTemplate");
        setTimeout(function(){FillData("@Url.Action("getHighScoreList", "AjaxService", null)", "#highScoreInfo", "#ScoresTemplate");}, 1000);
    });
</script>

<style>        
    #points { 
        height: 50px; 
        width: 50px; 
        position: absolute; 
        top: 520px; 
        left: 260px;         
        z-index: 100;
      }
      #guessedLetters {         
        position: absolute; 
        top: 550px; 
        left: 260px;         
        z-index: 100;
      }
      #ddGuess {         
        position: absolute; 
        top: 465px; 
        left: 560px;         
        z-index: 100;
      }    
      #score {         
        position: absolute; 
        top: 150px; 
        left: 135px;         
        z-index: 100;
      }      
</style>

 <div id="container">    
    
    <canvas id="gameCanvas" width="640" height="480"></canvas>
    <label id="points">test</label>
    <label id="guessedLetters">Letters guessed: </label>
    <label id="score"></label>
    <select id="ddGuess">
        <option value="nil"></option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        <option>G</option>
        <option>H</option>
        <option>I</option>
        <option>J</option>
        <option>K</option>
        <option>L</option>
        <option>M</option>
        <option>N</option>
        <option>O</option>
        <option>P</option>
        <option>Q</option>
        <option>R</option>
        <option>S</option>
        <option>T</option>
        <option>U</option>
        <option>V</option>
        <option>W</option>
        <option>X</option>
        <option>Y</option>
        <option>Z</option>
    </select>

    <div id="WordInfo"></div>
    <div id="highScoreInfo"></div>
</div>

<script type="text/javascript">
    var b2Vec2 = Box2D.Common.Math.b2Vec2;
    var secretWord;
    var lettersLeft;
    var actors = [];
    var currentScore = 0;
    var currentSpinScore;

    $(function () {
        $("#score").text(currentScore);
        $("#ddGuess").change(function () {
            var guessedLetter = $(this).val();
            var st = gamvas.state.getCurrentState();
            if (guessedLetter != 'nil') {
                var indices = [];
                for (var j = 0; j < secretWord.length; j++) {
                    if (secretWord[j].toUpperCase() == guessedLetter) {
                        indices.push(j);
                    }
                }

                if (indices.length > 0) {
                    for (var i = 0; i < indices.length; i++) {
                        var letterActors = $.grep(actors, function (item) { return item.name == secretWord + 'container' + indices[i]; });
                        letterActors[0].setFile(st.resource.getImage('Content/assets/' + guessedLetter + '.png'));
                        currentScore += currentSpinScore;
                        lettersLeft--;
                    }
                    $("#score").text(currentScore);
                }
                else {
                    $("#guessedLetters").append(" " + guessedLetter);
                }

                $("#points").css('visibility', 'hidden');
                $("#ddGuess").val(0);
                $("#ddGuess").css('visibility', 'hidden');
            }
        });
    });
    
    buttonBehavior = gamvas.ActorState.extend({
        onMouseDown: function (button, x, y) {
            if (this.actor.fixture.GetShape().TestPoint(this.actor.fixture.GetBody().GetTransform(), new b2Vec2(gamvas.physics.toWorld(x), gamvas.physics.toWorld(y)))) {
                if (this.actor.name == 'start') {
                    gamvas.state.setState('main');
                }
                if (this.actor.name == 'spin') {
                    var randomnumber = Math.floor(Math.random() * 20) * 1000;
                    $("#points").text(randomnumber);
                    currentSpinScore = randomnumber;
                    $("#ddGuess").css('visibility', 'visible');
                    $("#points").css('visibility', 'visible');
                }
            }
        },
        doCollide: function () {
            return false;
        }
    });

    button = gamvas.Actor.extend({
        create: function (name, x, y, w, h) {
            this._super(name, x, y);
            var st = gamvas.state.getCurrentState();
            this.type = 'button';
            this.setCenter(Math.round(w / 2), Math.round(h / 2));            
            if (this.name == 'spin') {
                this.setFile(st.resource.getImage('Content/assets/spinbutton.png'));
            }
            this.layer = 8;
            this.addState(new buttonBehavior('sample_behave'), true);
            this.bodyRect(this.position.x, this.position.y, w, h, gamvas.physics.STATIC);
        }
    });

    menuState = gamvas.State.extend({
        init: function () {
            gamvas.physics.resetWorld(0, 9.81, true);
            var d = gamvas.getCanvasDimension();
            gamvas.physics.pixelsPerMeter = 128;
            this.camera.setPosition(d.w / 2, d.h / 2);
        },
        enter: function () {
            $("#points").css('visibility', 'hidden');
            $("#ddGuess").css('visibility', 'hidden');
            $("#guessedLetters").css('visibility', 'hidden');
            $("#score").css('visibility', 'hidden');
            this.startButton = new button('start', gamvas.getCanvasDimension().w / 2, gamvas.getCanvasDimension().h / 2, 155, 48);
            this.addActor(new background('menu-background', 0, 0, 'wheel-of-fortune.jpg'));
            this.addActor(this.startButton);
            this.registerInputEvents(this.startButton);
        },
        draw: function (t) {
            this.c.fillStyle = '#FFFFFF';
            this.c.font = 'bold 40px Arial';
            this.c.textAlign = 'center';
            this.c.fillText("Start", 300, 250);            
        }
    });

    background = gamvas.Actor.extend({
        create: function (name, x, y) {
            var st = gamvas.state.getCurrentState();
            this._super(name, x, y);            
            this.setFile(st.resource.getImage('Content/assets/background.png'));
            
            this.layer = 0;
        }
    });

    container = gamvas.Actor.extend({
        create: function (name, x, y, t) {
            var st = gamvas.state.getCurrentState();
            this._super(name, x, y);
            this.setCenter(29, 29);
            this.setFile(st.resource.getImage('Content/assets/blank.png'));
            this.layer = 2;
            this.bodyRect(this.position.x, this.position.y, 64, 64, gamvas.physics.KINEMATIC);
        }
    });

    mainState = gamvas.State.extend({
        init: function () {
            gamvas.physics.resetWorld(0, 9.81, true);
            var d = gamvas.getCanvasDimension();
            gamvas.physics.pixelsPerMeter = 128;
            this.camera.setPosition(d.w / 2, d.h / 2);
        },
        enter: function () {
            $("#guessedLetters").css('visibility', 'visible');
            $("#score").css('visibility', 'visible');
            this.addActor(new background('main-background', 0, 0, 'main-background.jpg'));
            this.spinButton = new button('spin', gamvas.getCanvasDimension().w / 2 - 100, gamvas.getCanvasDimension().h / 2 + 100, 155, 48);
            this.addActor(this.spinButton);
            this.registerInputEvents(this.spinButton);

            secretWord = "SEG"; //TODO: get via API
            currentScore = 0;

            var d = gamvas.getCanvasDimension();
            total = secretWord.length,
            totalLength = (total * 72) - 10,
            margin = ((d.w - totalLength) / 2) + 37,
            lettersLeft = secretWord.length;


            word = secretWord.split('');
            for (var i = 0; i < secretWord.length; i++) {
                var lc = new container(secretWord + 'container' + i, margin + (72 * i), 100, word[i]);
                this.addActor(lc);
                actors.push(lc);
            }
        },
        draw: function (t) {
            if (lettersLeft == 0) {
                this.c.fillStyle = '#ff6631';
                this.c.font = 'bold 40px Oregano';
                this.c.textAlign = 'center';
                this.c.fillText('WIN', 400, 240);
            }
        }
    });

    gamvas.event.addOnLoad(function () {
        gamvas.state.addState(new menuState('menu'));
        gamvas.state.addState(new mainState('main'));
        gamvas.start('gameCanvas');
    });

</script>